<template>
    <div>
        <Row>
            <Form ref="queryRoleVO" :model="queryRoleVO" :label-width="80" inline>
                <Form-item label="角色名">
                    <Input v-model="queryRoleVO.roleName" placeholder="请输入"></Input>
                </Form-item>
                <Form-item label="备注">
                    <Input v-model="queryRoleVO.remark" placeholder="请输入"></Input>
                </Form-item>
                <Form-item label="修改人">
                    <Input v-model="queryRoleVO.creationBy" placeholder="请输入"></Input>
                </Form-item>
                <Form-item label="时间">
                    <Date-picker v-model="queryRoleVO.creationDate" type="date" placeholder="选择日期"></Date-picker>
                </Form-item>
            </Form>
        </Row>
    
        <Row>
            <Col span="24" style="text-align: center;margin-bottom: 2em">
            <i-col :sm="{ span: 0 }" style="display:inline-block;margin:0 2em;float:none" v-if="hasPermission('RoleService.create')">
                <Button type="info" icon="plus" @click="addrole">新增</Button>
            </i-col>
            <i-col :sm="{ span: 2 }" style="display:inline-block;margin:0 2em;float:none">
                <Button type="info" icon="search" @click="queryRole">搜索</Button>
            </i-col>
            <i-col :sm="{ span: 0 }" style="display:inline-block;margin:0 2em;float:none">
                <Button type="info" icon="refresh" @click="clean">清除</Button>
            </i-col>
            </col>
        </Row>
    
        <row>
            <Table :context="self" :data="sourceData" :size="tablesize" :columns="cols"></Table>
        </row>
        <row style="float: right; margin:1em 0">
            <Page :total="totalRecord" :current="pageNo" :page-size-opts=[10,50,100] show-elevator show-sizer show-total @on-change="onPageIndexChange" @on-page-size-change="onPageSizeChange"></Page>
        </row>
        <Modal ref="modal" v-model="modal" title="新增角色" @on-ok="ok" @on-cancel="cancel">
            <Form ref="roleVO" :model="roleVO" :rules="ruleValidate" :label-width="80">
                <Form-item label="角色名" prop="roleName">
                    <Input ref="roleName" v-model="roleVO.roleName" placeholder="请输入角色名"></Input>
                </Form-item>
                <Form-item label="角色分组" prop="roleGroup">
                    <Input ref="roleGroup" v-model="roleVO.roleGroup" placeholder="请输入角色分组"></Input>
                </Form-item>
                <Form-item label="备注" prop="remark">
                    <Input ref="remark" v-model="roleVO.remark" type="textarea" placeholder="请输入备注"></Input>
                </Form-item>
            </Form>
        </Modal>
        <Modal ref="permission" title="选择权限" v-model="permission" @on-ok="getCheckedNodes">
            <template>
                <Tree ref="tree" :data="baseData" show-checkbox></Tree>
            </template>
        </Modal>
    </div>
</template>
<script>

export default {
    data() {
        return {
            roleId: "",
            self: this,
            totalRecord: 1,
            totalPage: 1,
            pageNo: 1,
            pageSize: 10,
            cols: [
                {
                    title: '角色名',
                    key: 'roleName'
                },
                {
                    title: '所属分组',
                    key: 'roleGroup'
                },
                {
                    title: '备注',
                    key: 'remark'
                },
                {
                    title: '修改人',
                    key: 'creationBy'
                },
                {
                    title: '时间',
                    key: 'creationDate',
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 250,
                    align: 'center',
                    render(row, column, index) {
                        return `<i-button type="success" size="small" @click="choose(${index})">角色授权</i-button>
                        <i-button type="primary" size="small" @click="show(${index})">编辑</i-button>
                         <i-button type="error" size="small" @click="confirmRoleDelete(${index})">删除</i-button>`;
                    }
                }
            ],
            sourceData: [],
            queryRoleVO: {
                roleName: '',
                remark: '',
                creationBy: '',
                creationDate: ''
            },
            baseData: [],
            roleVO: {
                roleName: '',
                remark: ''
            },
            tablesize: "small",
            modal: false,
            permission: false,
            disabled: false,
            ruleValidate: {
                roleName: [
                    { required: true, message: '角色名不能为空', trigger: 'blur' }
                ],
                roleGroup: [
                    { required: true, message: '所属分组不能为空', trigger: 'blur' }
                ],
            }
        }
    },
    mounted() {
        this.queryRole();
    },
    methods: {
        queryRole() {
            this.$http.post("services/rolequery/" + this.pageSize + "/" + this.pageNo, this.queryRoleVO
            ).then(response => {
                var data = response.data;
                var pageVO = data.pageVO;
                this.sourceData = data.resultList;
                this.totalRecord = pageVO.totalRecord;
            }, response => {
                this.$Message.error("获取失败, 返回: " + response);
            })
        },
        getCheckedNodes() {
            var permissionArray = [];
            var addArray = [];
            permissionArray = this.$refs.tree.getCheckedNodes()
            for (var i = 0; i < permissionArray.length; i++) {
                var permissionVO = {};
                if (permissionArray[i].id) {
                    permissionVO.permissionId = permissionArray[i].id;
                    permissionVO.roleId = this.roleId;
                    addArray.push(permissionVO);
                }
            }
            this.$http.post("services/permissioninsert/" + this.roleId, addArray
            ).then(response => {
                this.disabled = false;
                this.$Message.success("授权成功");
                this.queryRole();
            }, response => {
                this.disabled = false;
                this.$Message.error("获取失败, 返回: " + response);
            })
        },
        onPageIndexChange(pageindex) {
            this.pageNo = pageindex;
            this.queryRole();
        },
        clean() {
            this.queryRoleVO.roleName = '';
            this.queryRoleVO.remark = '';
            this.queryRoleVO.creationBy = '';
            this.queryRoleVO.creationDate = '';
        },
        onPageSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.queryRole();
        },
        ok() {
            if (this.roleVO.roleId) {
                this.$http.post("services/roleupdate", this.roleVO
                ).then(response => {
                    this.disabled = false;
                    this.$Message.success("修改成功");
                    this.queryRole();
                }, response => {
                    this.disabled = false;
                    this.$Message.error("获取失败, 返回: " + response);
                })
            } else {
                this.$http.post("services/roleadd", this.roleVO
                ).then(response => {
                    this.$Message.success("保存成功");
                    this.queryRole();
                }, response => {
                    this.$Message.error("获取失败, 返回: " + response);
                })
            }
        },
        cancel() {
            this.disabled = false;
        },
        show(index) {
            this.disabled = true;
            this.roleVO.roleId = this.sourceData[index].roleId;
            this.roleVO.roleName = this.sourceData[index].roleName;
            this.roleVO.roleGroup = this.sourceData[index].roleGroup;
            this.roleVO.remark = this.sourceData[index].remark;
            this.roleVO.creationBy = this.sourceData[index].creationBy;
            this.roleVO.creationDate = this.sourceData[index].creationDate;
            this.modal = true;
        },
        addrole() {
            this.roleVO.roleId = "";
            this.roleVO.roleGroup = "";
            this.roleVO.roleName = "";
            this.roleVO.remark = "";
            this.roleVO.creationBy = "";
            this.roleVO.creationDate = "";
            this.modal = true;
        },
        choose(index) {
            this.roleId = this.sourceData[index].roleId;
            var permissionVO = {};
            permissionVO.roleId = this.roleId
            this.$http.post('services/getpermission/', permissionVO).then(response => {
                var data = response.data;
                this.baseData = data;
            }, response => {
                this.$Message.error('获取失败, 返回: ' + response);
            })
            this.permission = true;
        },
        confirmRoleDelete(index) {
            this.$Modal.confirm({
                content: '<p>是否删除数据？</p>',
                onOk: () => {
                    let roleList = [];
                    roleList.push(this.sourceData[index]);
                    this.$http.post("services/roledelete", roleList
                    ).then(response => {
                        this.$Message.success("删除成功");
                        this.queryRole();
                    }, response => {
                        this.$Message.error("获取失败, 返回: " + response);
                    })
                },
                onCancel: () => {
                    this.$Message.info('取消删除');
                }
            });
        },
        confirmBatchDeleteRole(roleList) {
            this.$http.post("services/roledelete", roleList
            ).then(response => {
                this.$Message.success("删除成功");
            }, response => {
                this.$Message.error("获取失败, 返回: " + response);
            })
        }
    }
}
</script>